<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="./css/style.css" />
		<script src="./js/jquery.min.js"></script>
		<script src="./js/vue2.7.16.js"></script>
		<script src="./js/rem.js"></script>
		<title></title>
	</head>
	<body>
		<div class="webApp" id="webApp">
			<img src="./img/bg.png" class="bgImage" :class="contentClass>0?'filterImg':''" alt="背景" srcset="" />
			<!-- nav start -->
			<div class="navBox">
				<a href="javaScript:void"><img src="./img/logo.png" alt="logo" /></a>
				<div class="nav">
					<a :href="item.link" v-for="(item,index) in nav" :key="index">{{item.name}}</a>
				</div>
				<a href="javaScript:void" class="btn">登录</a>
			</div>
			<!-- nav end -->
			<div class="content"  :style="{top: `-${contentClass*100}vh`}" id="content">
				<!-- page1 start -->
				<div class="page1">
					<div class="welcomeBox">
						<div class="btn">
							<div class="text">欢迎</div>
							<img src="./img/Frame.png" class="img" id="page1Img" alt="箭头" srcset="" />
						</div>
						<div class="sxnf">欢迎您来到三峡农夫</div>
						<div class="sxnfEnglish">You're Welcome To Experience It Now</div>
					</div>
				</div>
				<!-- page1 end -->
				<!-- page2 start -->
				<div class="page2">
					<div class="cont">
						<div class="title">精选分类</div>
						<div class="subhead">Featured Categories</div>
						<div class="classify">
							<div class="item" v-for="(item,index) in classify" :key="index">
								<img :src="item.img" :alt="item.name" srcset="" />
								<a :href="item.link">{{item.name}}</a>
							</div>
						</div>
						<img src="./img/Frame.png" class="img" id="page2Img" alt="箭头" srcset="" />
					</div>
				</div>
				<!-- page2 end -->
				<!-- page3 start -->
				<div class="page3">
					<div class="cont">
						<div class="title">精选推荐</div>
						<div class="subhead">Featured Picks</div>
						<div class="picks">
							<div class="item" v-for="(item,index) in picks" :key="index">
								<div class="name">{{item.tag}}</div>
								<img :src="item.img" class="orange" :alt="item.tag" srcset="" />
								<div class="msg">
									<div class="company">
										<div class="companyName">{{item.company}}</div>
										<div class="companyExplain">{{item.companyExplain}}</div>
									</div>
									<div class="pic">￥{{item.pic}}</div>
								</div>
							</div>
							<div class="item">
								<a href="javaScript:void">更多<img src="./img/jt.png" alt="箭头" srcset="" /></a>
							</div>
						</div>
					</div>
				</div>
				<!-- page3 end -->
			</div>
		</div>
		<script src="./js/index.js"></script>
	</body>
</html>
